{% if section and section.type == "header" %}
  {% assign section = section %}
  {% assign router = section.router %}
{% else %}
  {% assign section = global.sections.header %}
  {% assign router = routes.current_route %}
{% endif %}


{% get_nav nav_id={section.settings.nav.id} %}
{% assign header_nav = nav %}

{% get_nav nav_id={section.settings.top_nav.id} %}
{% assign top_nav = nav %}
{% get_currencies limit=100 %}

{% stylesheet %}
  #header_box .header_top {
    background: #f5f5f5;
    padding: 6px 0;
  }
  #header_box .header_top .container_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  #header_box .header_top .header_top_left {
    display: flex;
    align-items: center;
  }
  #header_box .header_top .header_top_right {
    max-width: 55%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  #header_box .header_top .board_text {
    margin-right: 50px;
  }
  #header_box .currency_box {
    height: 50px;
    position: relative;
    z-index: 1000;
  }
  #header_box .currency_txt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
  }
  #header_box .drop_currency a {
    color: var(--menu-color);
    letter-spacing: var(--nav_letter_spacing);
    font-size: 14px;

  }
  #header_box .currency_txt svg {
    width: 14px;
    fill: #333;
    margin-left: 5px;
  }

  #header_box .drop_currency {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 120px;
    margin-left: -60px;
    box-sizing: border-box;
    background: #fff;
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
    -webkit-transform: scale3d(1, 0, 1);
    transform: scale3d(1, 0, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  }
  #header_box .drop_currency_on .drop_currency {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  #header_box .currency_txt svg {
    -webkit-transition: transform 0.2s ease-in-out;
    -moz-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
  }
  #header_box .drop_currency_on .currency_txt svg {
    transform: rotate(-180deg);
  }
  #header_box .drop_currency li {
    list-style-type: none;
    border-bottom: 1px solid #f5f5f5;
  }
  #header_box .drop_currency li:last-child {
    border-bottom: none;
  }
  #header_box .drop_currency a {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    /* color: #333; */
    margin: 0;
  }
  #header_box .drop_currency a:hover {
    background: #f5f5f5;
  }
  #header_box .header_top_right a {
    margin-right: 30px;
    transition: all 0.5s;
    font-weight: 500;
  }
  #header_box .header_top_right a:hover {
    color: var(--hover_color, #ff6f61);
  }

  #header_box .header_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #header_box .logo a {
    font-size: var(--title_font_size);
    color: var(--title_color);
    font-family: var(--header_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    letter-spacing: 1px;
  }

  #header_box .header_search form {
    display: flex;
    justify-content: space-between;
    height: 48px;
    width: 470px;
    border: 1px solid #1f1f1f;
    box-sizing: border-box;
  }
  #header_box .header_search .search_txt {
    width: calc(100% - 46px);
    height: 46px;
    text-indent: 25px;
  }
  #header_box .header_search .search_btn {
    background: none;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }
  #header_box .header_icon {
    width: 200px;
    display: flex;
    justify-content: flex-end;
  }
  #header_box .header_icon .saerch_icon {
    display: none;
  }
  #header_box .header_icon a {
    margin-left: 20px;
  }
  #header_box .header_icon .cart_icon {
    position: relative;
  }
  #header_box .header_icon .cart_icon span {
    position: absolute;
    top: -10px;
    left: 12px;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    line-height: 11px;
    min-width: 18px;
    height: 18px;
    border-radius: 30px;
    padding: 4px;
    background-color: #ff6f61;
    display: inline-block;
    box-sizing: border-box;
    display: none;
  }

  #header_box .nav_box {
    position: relative;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
  }
  #header_box .nav {
    width: auto;
  }
  #header_box .nav > ul {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: -20px;
  }
  #header_box .nav li {
    display: block;
    list-style-type: none;
    padding-left: 20px;
  }
  #header_box .nav .nav-li {
    position: relative;
  }
  #header_box .nav > ul > li > a {
    position: relative;
    transition: 0.5s;
    white-space: nowrap;
  }
  #header_box .nav > ul > li > a:before {
    content: '';
    position: absolute;
    bottom: 17px;
    left: 0;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--hover_color, #ff6f61);
    transition: 0.5s;
    opacity: 0;
  }
  #header_box .nav > ul > li > a:hover {
    color: var(--hover_color, #ff6f61);
  }
  #header_box .nav > ul > li > a:hover svg {
    fill: var(--hover_color, #ff6f61);
  }
  #header_box .nav > ul > li > a:hover:before {
    opacity: 1;
    width: 100%;
  }
  #header_box .nav li .nav-li-a {
    display: block;
    height: 60px;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
  }
  #header_box .nav li .nav-li-a svg {
    margin-left: 5px;
  }
  #header_box .nav li .nav-li-a:hover {
    opacity: 0.75;
  }
  #header_box .nav li .nav-child {
    position: absolute;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 0 2px #ddd;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    font-size: 14px;
    transition: all 0.3s;
    z-index: 1000;
  }
  #header_box .nav li .nav-child .container_wrapper {
    padding: 0;
  }
  #header_box .nav li .nav-child .container_wrapper > a {
    display: block;
    line-height: 2;
    color: #666;
  }
  #header_box .nav li .nav-child > a:hover {
    text-decoration: underline;
    color: var(--color-main);
  }

  #header_box .nav li.nav-child-three {
    position: static;
  }
  #header_box .nav li.nav-child-three .nav-child {
    width: 100%;
    left: 0;
    box-shadow: none;
    background: #fff;
    padding: 20px 80px;
    box-shadow: 0 0 2px #ddd;
    z-index: 1000;
  }
  #header_box .nav li.nav-child-three .container_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 40px 0 20px;
    background: #fff;
    box-sizing: border-box;
    gap: 50px;
  }
  #header_box .nav li.nav-child-three .nav-child dl {
    width: 25%;
    margin-bottom: 30px;
  }
  #header_box .nav li.nav-child-three .nav-child dl a {
    display: block;
    line-height: 2;
    transition: all 0.3s;
  }
  #header_box .nav li.nav-child-three > .nav-child > .container_wrapper > a {
    width: 25%;
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
  }
  #header_box .nav li.nav-child-three .nav-child dl a:hover {
    text-decoration: underline;
    color: #333;
  }
  #header_box .nav li.nav-child-three .nav-child dl dd a {
    font-size: 14px;
    color: #666;
  }
  #header_box .nav li.nav-child-three .nav-child dl dt {
    margin-bottom: 5px;
  }
  #header_box .nav li.nav-child-three .nav-child dl dt a {
    font-size: 16px;
    font-weight: 500;
  }
  #header_box .nav li.nav-child-three .nav-child dl dd a {
    font-size: 14px;
    color: #666;
  }
  #header_box .nav li.nav-child-three .nav-child dl dd a:hover {
    color: var(--color-main);
  }
  #header_box .nav li:hover .nav-child {
    opacity: 1;
    visibility: visible;
  }
  #header_box .mobile_search_title,
  #header_box .mobile_menu_cate {
    display: none;
  }
  @media(max-width: 1000px) {
    #header_box .mobile_menu_cate a,
    #header_box .header_icon a {
      display: flex;
      align-items: center;
    }
    #header_box .nav_box,
    #header_box .header_top {
      display: none;
    }
    #header_box .mobile_menu,
    #header_box .header_icon .saerch_icon,
    #header_box .mobile_search_title,
    #header_box .mobile_menu_cate {
      display: flex;
      align-items: center;
    }

    #header_box .mobile_menu_cate,
    #header_box .header_icon {
      width: 120px;
    }
    #header_box .header_search {
      position: fixed;
      right: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      visibility: hidden;
      transition: all 0.25s;
      background: rgba(0, 0, 0, 0.5);
      z-index: 500100;
    }
    #header_box .header_search.search_on {
      opacity: 1;
      visibility: visible;
    }
    #header_box .header_search_wrapper {
      position: absolute;
      right: 0;
      top: 0;
      width: 470px;
      background: #fff;
      height: 100vh;
      transform: translate(100%, 0);
      transition: all 0.25s;
    }
    #header_box .header_search.search_on .header_search_wrapper {
      transform: none;
    }
    #header_box .mobile_search_title {
      height: 60px;
      line-height: 60px;
      position: relative;
      text-align: center;
      font-size: 20px;
      border-bottom: 1px solid #e6e6e6;
      padding: 0 30px;
    }
    #header_box .mobile_search_close {
      position: absolute;
      right: 30px;
      top: 18px;
      width: 24px;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #header_box .mobile_search_close svg {
      color: #a6a6a6;
    }
    #header_box .mobile_search_box {
      padding: 30px;
    }
    #header_box .header_search form {
      width: 100%;
      height: 54px;
    }
    #header_box .header_search .search_txt {
      height: 52px;
      width: calc(100% - 52px);
    }
    #header_box .header_search .search_btn {
      height: 52px;
      width: 52px;
    }

  }

  #header_box .mobile_menu {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 500100;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    display: block;
    font-family: var(--general_font_family);
  }
  .mobile_menu .mobile_mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
  #header_box .mobile_menu .mobile_menu_wrapper {
    height: 100vh;
    width: 470px;
    padding-bottom: 50px;
    background: #fff;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translate(-100%, 0);
    overflow-y: auto;
    box-sizing: border-box;
    transition: all 0.3s;
    position: relative;
    z-index: 10;
  }

  .mobile_menu .mobile_currency .mobile_currency_text_wrap {
  position: relative;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_text svg {
  transition: all .2s ease;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap.open .mobile_currency_text svg{
  transform: rotate(180deg);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap.open .mobile_currency_list {
  display: block;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list {
  position: absolute;
  width: 100%;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 2px;
  box-sizing: border-box;
  max-height: 150px;
  overflow-y: auto;
  background-color: #FFFFFF;
  display: none;
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list[position=bottom] {
  top: calc(100% + 6px);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list[position=top] {
  bottom: calc(100% + 6px);
}
.mobile_menu .mobile_currency .mobile_currency_text_wrap .mobile_currency_list .mobile_web-currency {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.mobile_menu .mobile_currency .mobile_currency_text {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
  box-sizing: border-box;
  background: none;
  border: 1px solid #000;
  color: #000;
  font-family: var(--general_font_family);
  appearance: none;
  font-size: 20px;
}

  #header_box .mobile_menu_on {
    opacity: 1;
    visibility: visible;
  }
  #header_box .mobile_menu_on .mobile_menu_wrapper {
    transform: none;
  }


  #header_box .mobile_menu .mobile_menu_top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #header_box .mobile_menu .mobile_menu_close {
    position: absolute;
    right: 30px;
    top: 18px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #header_box .mobile_menu .mobile_menu_close svg {
    color: #a6a6a6;
  }

  #header_box .mobile_menu .mobile_menu_top a {
    font-size: 25px;
    color: var(--title_color);
    font-family: var(--header_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    letter-spacing: 1px;
  }

  #header_box .mobile_menu .mobile_nav {
    margin-top: 20px;
    padding: 0 30px;
  }
  #header_box .mobile_menu .mobile_nav li {}
#header_box .mobile_menu .mobile_nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #000;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: calc(100% - 70px);
  font-size: 20px;
}
#header_box .mobile_menu .mobile_nav-item {
  position: relative;
}
#header_box .mobile_menu .mobile_nav_down {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;

}
#header_box .mobile_menu .mobile_nav_down svg {
  fill: #000;
  transition: all 0.3s;
}
#header_box .mobile_menu .mobile_currency .mobile_nav_down {
  right: 10px;
}
#header_box .mobile_menu li.on > .mobile_nav-item > .mobile_nav_down > svg {
  transform: rotate(-180deg);
}
#header_box .mobile_menu .child_mobile_nav {
  padding: 0 0 0 15px;
  opacity: 0;
  display: none;
  height: 0;
}
#header_box .mobile_nav li.on > .child_mobile_nav {
  opacity: 1;
  display: block;
  height: auto;
}
#header_box .mobile_menu .child_mobile_nav li a {
  width: 100%;
  box-sizing: border-box;
}
#header_box .mobile_menu .child_mobile_nav .child_mobile_nav li a {
  padding: 0;
}
#header_box .mobile_currency {
  position: relative;
  width: 150px;
  margin: 15px 0 0 30px;
}

#header_box .logo {
  text-align: center;
}
@media(max-width: 767px) {
  #header_box .logo a {
    font-size: calc(var(--title_font_size) * var(--wap_title_scale));
  }
  #header_box .header_search_wrapper,
  #header_box .mobile_menu .mobile_menu_wrapper {
    width: 90%;
  }
  #header_box .mobile_menu .mobile_nav {
    padding: 0 20px;
  }
  #header_box .mobile_currency {
    margin: 15px 0 0 20px;
  }
  #header_box .header_icon a {
    margin-left: 10px;
  }
  #header_box .mobile_menu_cate,
  #header_box .header_icon {
    width: 60px;
  }
  #header_box .mobile_search_box {
    padding: 20px;
  }
  #header_box .mobile_search_close {
    right: 20px;
  }
  #header_box .mobile_search_title {
    padding: 0 20px;
  }
}
{% endstylesheet %}

<div id="header_box" style="--hover_color:{{section.settings.hover_color|default:'#ff6f61'}}">

  <div class="header_top" style="background-color: {{ section.settings.board_bg }};">
    <div class="container_wrapper">
      <div class="header_top_left">
        <div class="board_text">{{ section.settings.board_text }}</div>

        {% if section.settings.is_currency %}
          <div class="currency_box">
            <div class="currency_txt" id="currencyBox">
              {% if section.settings.is_currency_flag %}
                <span style="display:flex;gap: 6px;">
                 
                   {% include 'flag',code: currency.standard_code  %}
                  {{ currency.standard_code }}
                </span>
              {% else %}
                {{ currency.standard_code }}
              {% endif %}
              {% include icon_header_down , {width: '12', height: '12' } %}
            </div>
            <div class="drop_currency" id="currencyCon">
              <ul class="currency">
                {% if section.settings.is_currency_flag %}
                  {% for list in currencies %}
                    
                    <li>
                      <a
                        href="javascript:void(0);"
                        class="web-currency"
                        data-type="{{ list.standard_code }}"
                        rel="nofollow">
                        <span style="padding: 3px 0;">{% include 'flag',code: list.standard_code  %}</span>
                        <span>{{ list.standard_code }}</span>
                        <span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </a>
                    </li>
                  {% endfor %}
                {% else %}
                  {% for list in currencies %}
                    <li>
                      <a
                        href="javascript:void(0);"
                        class="web-currency"
                        data-type="{{ list.standard_code }}"
                        rel="nofollow">
                        <span>{{ list.standard_code }}</span>
                        <span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                      </a>
                    </li>
                  {% endfor %}
                {% endif %}
              </ul>
            </div>
            <script>
              $(".currency_box").hover(function() {
                $('.currency_box').addClass('drop_currency_on');
              }, function() {
                $('.currency_box').removeClass('drop_currency_on');
              })
            </script>
          </div>
        {% endif %}

      </div>
      <div class="header_top_right">
        {% if section.settings.top_nav.id %}
          {% for item in top_nav.nav_item %}
            <a
              style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
              target="{{item.setting_json.open | default : '_self' }}"
              {% if item.setting_json.model != 1 %}
              rel="external nofollow"
              {% endif %}
              href="{{item.url_json.url | default:'javascript:void(0)' }}">
              {% if item.src %}
                <header-nav-img>
                  {% include 'lazy_img', src: item.src, alt: '' %}
                  {{ item.nav_item_name }}
                </header-nav-img>
              {% else %}
                {{ item.nav_item_name }}
              {% endif %}
            </a>
          {% endfor %}
        {% else %}
          <a href="javascript:void(0)">Wishlist</a>
          <a href="javascript:void(0)">Order Tracking</a>
          <a href="javascript:void(0)">Shipping</a>
          <a href="javascript:void(0)">Contact</a>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="header_wrapper container_wrapper">
    <div class="mobile_menu_cate">
      <a class="mobile_menu_icon" href="javascript:void(0);">
        {% include "icon_header_cate", width: '18', height: '18' %}
      </a>
    </div>
    <div class="logo def_header_logo">
      {% include 'logo', settings: section.settings %}
    </div>
    <div class="header_search">
      <div class="header_search_wrapper">
        <div class="mobile_search_title">
          <span>{{ lang.search.search }}</span>
          <a class="mobile_search_close" href="javascript:(void);">
            <svg
              aria-hidden="true"
              role="img"
              focusable="false"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round">
              <line
                x1="18"
                y1="6"
                x2="6"
                y2="18"></line>
              <line
                x1="6"
                y1="6"
                x2="18"
                y2="18"></line>
            </svg>
          </a>
        </div>
        <div class="mobile_search_box">
      {% if section.settings.is_search %}

          <form
            class="control-all-search"
            action="/search"
            onsubmit="return oemsaasSearch('.search_txt')">
            <input
              class="search_txt"
              type="text"
              name="q"
              placeholder="{{ section.settings.search_placeholder }}">
            <button class="search_btn" type="submit">{% include 'icon_header_search', width: '18', height: '18' %}</button>
          </form>
      {% endif %}

        </div>
      </div>
    </div>
    <div class="header_icon">

      {% if section.settings.is_search %}
        <a class="saerch_icon control-all-search" href="javascript:void(0);">
          {% include "icon_header_search", width: '20', height: '20'  %}
        </a>
      {% endif %}

      {% if section.settings.is_member %}
        <a class="account_icon" href="/account/login">
          {% include "icon_header_account", width: '20', height: '20'  %}
        </a>
      {% endif %}

      <a
        class="cart_icon"
        {% if page_ca != 'cart_list' %}
        id="cart_icon"
        {% endif %}
        href="javascript:void(0);">
        {% include "icon_header_cart", width: '20', height: '20'  %}
        <span id="cart_number"></span>
      </a>
    </div>


  </div>
  <div class="nav_box">
    <div class="container_wrapper">
      <div class="nav">
        <ul>
          {% if section.settings.nav.id %}
            {% for item in header_nav.nav_item %}

              <li class="nav-li">
                <a
                  class="nav-li-a"
                  style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                  target="{{item.setting_json.open | default : '_self' }}"
                  {% if item.setting_json.model != 1 %}
                  rel="external nofollow"
                  {% endif %}
                  href="{{item.url_json.url | default:'javascript:void(0)' }}">
                  {% if item.src %}
                    <header-nav-img>
                      {% include 'lazy_img', src: item.src, alt: '' %}
                      {{ item.nav_item_name }}
                    </header-nav-img>
                  {% else %}
                    {{ item.nav_item_name }}
                  {% endif %}
                </a>
                {% if item.children %}

                  <div class="nav-child">
                    <div class="container_wrapper">
                      {% for el in item.children %}
                        <dl>
                          <dt>
                            <a
                              style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};"
                              target="{{el.setting_json.open | default : '_self' }}"
                              {% if el.setting_json.model != 1 %}
                              rel="external nofollow"
                              {% endif %}
                              href="{{el.url_json.url | default:'javascript:void(0)' }}">
                              {% if el.src %}
                                <header-nav-img>
                                  {% include 'lazy_img', src: el.src, alt: '' %}
                                  {{ el.nav_item_name }}
                                </header-nav-img>
                              {% else %}
                                {{ el.nav_item_name }}
                              {% endif %}
                            </a>
                          </dt>
                          {% for ddItem in el.children %}
                            <dd>
                              <a
                                style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};"
                                target="{{ddItem.setting_json.open | default : '_self' }}"
                                {% if ddItem.setting_json.model != 1 %}
                                rel="external nofollow"
                                {% endif %}
                                href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                                {% if ddItem.src %}
                                  <header-nav-img>
                                    {% include 'lazy_img', src: ddItem.src, alt: '' %}
                                    {{ ddItem.nav_item_name }}
                                  </header-nav-img>
                                {% else %}
                                  {{ ddItem.nav_item_name }}
                                {% endif %}
                              </a>
                            </dd>
                          {% endfor %}
                        </dl>
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}

              </li>
            {% endfor %}
            <li class="nav-li more-menu hidden">
              <a class="nav-li-a" href="javascript:;">{{ lang.general.more_link }}</a>
            </li>

          {% else %}
            <li class="nav-li">
              <a class="nav-li-a" href="/">MEN</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">WOMEN</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">BAGS</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">HOME AND DECOR</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">OUTDOOR</a>
            </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>

  <div class="mobile_menu">
    <div class="mobile_menu_wrapper">
      <div class="mobile_menu_top def_header_logo">
        {% include 'logo', settings: section.settings %}
        <span class="mobile_menu_close">
          <svg
            aria-hidden="true"
            role="img"
            focusable="false"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round">
            <line
              x1="18"
              y1="6"
              x2="6"
              y2="18"></line>
            <line
              x1="6"
              y1="6"
              x2="18"
              y2="18"></line>
          </svg>
        </span>
      </div>
      <div class="mobile_nav">
        <ul>
          {% if section.settings.nav.id %}
            {% for item in header_nav.nav_item %}
              <li>
                <div class="mobile_nav-item">
                  <a
                    style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                    target="{{item.setting_json.open | default : '_self' }}"
                    {% if item.setting_json.model != 1 %}
                    rel="external nofollow"
                    {% endif %}
                    href="{{item.url_json.url | default:'javascript:void(0)' }}">
                    {% if item.src %}
                      <header-nav-img>
                        {% include 'lazy_img', src: item.src, alt: '' %}
                        {{ item.nav_item_name }}
                      </header-nav-img>
                    {% else %}
                      {{ item.nav_item_name }}
                    {% endif %}
                  </a>
                  {% if item.children %}
                    <span class="mobile_nav_down">{% include 'icon_header_down', width: '20', height: '20'  %}</span>
                  {% endif %}

                </div>
                {% if item.children %}
                  <ul class="child_mobile_nav">

                    {% for el in item.children %}
                      <li>
                        <div class="mobile_nav-item">
                          <a
                            style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};"
                            target="{{el.setting_json.open | default : '_self' }}"
                            {% if el.setting_json.model != 1 %}
                            rel="external nofollow"
                            {% endif %}
                            href="{{el.url_json.url | default:'javascript:void(0)' }}">
                            {% if el.src %}
                              <header-nav-img>
                                {% include 'lazy_img', src: el.src, alt: '' %}
                                {{ el.nav_item_name }}
                              </header-nav-img>
                            {% else %}
                              {{ el.nav_item_name }}
                            {% endif %}
                          </a>
                          {% if el.children %}
                            <span class="mobile_nav_down">{% include 'icon_header_down', width: '20', height: '20' %}</span>
                          {% endif %}
                        </div>
                        <ul class="child_mobile_nav">
                          {% for ddItem in el.children %}
                            <li>
                              <a
                                style="color:{{ddItem.setting_json.color}};font-style:{{ddItem.setting_json.style}};font-weight:{{ddItem.setting_json.bold}};text-decoration:{{ddItem.setting_json.decoration}};"
                                target="{{ddItem.setting_json.open | default : '_self' }}"
                                {% if ddItem.setting_json.model != 1 %}
                                rel="external nofollow"
                                {% endif %}
                                href="{{ddItem.url_json.url | default:'javascript:void(0)' }}">
                                {% if ddItem.src %}
                                  <header-nav-img>
                                    {% include 'lazy_img', src: ddItem.src, alt: '' %}
                                    {{ ddItem.nav_item_name }}
                                  </header-nav-img>
                                {% else %}
                                  {{ ddItem.nav_item_name }}
                                {% endif %}
                              </a>
                            </li>
                          {% endfor %}
                        </ul>
                      </li>
                    {% endfor %}
                  </ul>
                {% endif %}
              </li>
            {% endfor %}
          {% else %}
            <li class="nav-li">
              <a class="nav-li-a" href="/">MEN</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">WOMEN</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">BAGS</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">HOME AND DECOR</a>
            </li>
            <li class="nav-li">
              <a class="nav-li-a" href="/">OUTDOOR</a>
            </li>
          {% endif %}

        </ul>
      </div>
      {% if section.settings.is_currency %}
        <div class="mobile_currency">
          <div class="mobile_currency_text_wrap">
            <div class="mobile_currency_text">
              <span style="display:flex;gap: 6px;align-items: center;">
                {% if section.settings.is_currency_flag %}
                 
                   {% include 'flag',code: currency.standard_code  %}
                {% endif %}
                {{ currency.standard_code }}
              </span>
              {% include 'icon_header_down', width: '20', height: '20'  %}
            </div>
            <ul class="mobile_currency_list" position="top">
              {% if section.settings.is_currency_flag %}
                {% for list in currencies %}
                  
                  <li>
                    <div class="mobile_web-currency" data-type="{{ list.standard_code }}">
                      <span>{% include 'flag',code: list.standard_code  %}</span><span>{{ list.standard_code }}</span>:<span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                    </div>
                  </li>
                {% endfor %}
              {% else %}
                {% for list in currencies %}
                  <li>
                    <div class="mobile_web-currency" data-type="{{ list.standard_code }}" rel="nofollow">
                      <span>{{ list.standard_code }}</span>:<span>{{ list.symbol_left }}{{ list.symbol_right }}</span>
                    </div>
                  </li>
                {% endfor %}
              {% endif %}
            </ul>
          </div>
        </div>
      {% endif %}
    </div>
    <div class="mobile_mask"></div>
  </div>
</div>


<script type="text/javascript">
  $(function() {

    moi
      .setHeadMenu({
        parent: ".nav ul",
        child: ".nav-li",
        moreClass: ".more-menu",
        logoSrc:"{{section.settings.logo_pic.src}}",
        onMore: function() {
          $('.mobile_menu').addClass('mobile_menu_on')
        }
      })
      $('.nav-child')
      .each(function() {
        if ($(this).find('dl').length > 0) {
          $(this).parents('li').addClass('nav-child-three');
        }
      })
      $('.mobile_nav_down')
      .click(function() {
        if ($(this).parent().parent().hasClass('on')) {
          $(this).parent().parent().removeClass('on');
        } else {
          $(this).parent().parent().addClass('on');
        }
      })
    
    $('.mobile_nav-item svg')
    .click(function() {
      $(this).parent().siblings(".child_mobile_nav").slideToggle()
    })
    if($('.mobile_nav').height() > 250) {
      $('.mobile_currency_list').attr('position','top')
    }else {
      $('.mobile_currency_list').attr('position','bottom')
    }
 
    $('.mobile_currency_text').on('click',function(e) {
      e.stopPropagation();
      $(this).parent().addClass('open')
    })
    $('.mobile_currency_list').on('click',function(e) {
      e.stopPropagation();
    })
    $(".web-currency").click(function(){
      currencyPath($(this).data("type"))
    })
    $(".mobile_web-currency").click(function(){
      currencyPath($(this).data("type"))
    })
  function currencyPath(val) {
  const currency = moi.getUrlParam('currency');
  if (currency || location.href.indexOf('theme_id') > -1) {
    location.href = moi.changeURLArg(location.href, "currency", val)
  } else {
    location.href = moi.addURLParam(location.href, "currency", val)
  }
  }
  $('.saerch_icon')
  .click(function(e) {
    $('.header_search').addClass('search_on');
  })
  $('.mobile_search_close,.header_search')
  .click(function() {
    $('.header_search').removeClass('search_on');
  })
  $('.header_search_wrapper')
  .click(function(e) {
    e.stopPropagation();
  })


  $('.mobile_menu_icon')
  .click(function() {
    $('.mobile_menu').addClass('mobile_menu_on');
  })
  $('.mobile_menu .mobile_mask,.mobile_menu_close')
  .click(function() {
  $('.mobile_menu').removeClass('mobile_menu_on');
  $('.mobile_currency_text_wrap').removeClass('open');
  })

  $(document).click(function () {
    $('.mobile_currency_text_wrap').removeClass('open')
  });
  


  $('#cart_icon')
  .click(function() {
  window.oemsaasMiniCart();
  })
  $('.minicart .close_btn')
  .click(function() {
  $('.minicart').removeClass('minicart_on');
  })
  $('.minicart')
  .click(function() {
  $('.minicart').removeClass('minicart_on');
  })
  $('.minicart_wrapper')
  .click(function(e) {
  e.stopPropagation();
  })
  addCartNum();})
</script>

{% schema %}
{
	"tag": "",
	"class": "header",
	"is_global": true,
	"name": {
		"zh_CN": "头部",
		"en_US": "Header"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部菜单设置",
				"en_US": "Top Menu Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"id": "top_nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置",
				"en_US": "Menu Navigation Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "公告栏",
				"en_US": "Bulletin board"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "公告栏文案",
				"en_US": "Bulletin board copy"
			},
			"id": "board_text",
			"default": "We Free Shipping Worldwide."
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "公告栏背景",
				"en_US": "Bulletin board background"
			},
			"id": "board_bg",
			"default": "#fff"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "菜单选中颜色",
				"en_US": "Menu Select color"
			},
			"id": "hover_color",
			"default": "#ff6f61"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "顶部LOGO与图片",
				"en_US": "Top LOGO and image"
			}
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "pc端logo图片",
				"en_US": "Logo image on PC"
			},
			"id": "pc_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "pc端logo图片宽度",
				"en_US": "Logo image width on PC"
			},
			"id": "pc_logo_w",
			"max": "400",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_image",
			"label": {
				"zh_CN": "移动端logo图片",
				"en_US": "Mobile logo image"
			},
			"id": "wap_logo_pic",
			"default": ""
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端logo图片宽度",
				"en_US": "Mobile logo image width"
			},
			"id": "wap_logo_w",
			"max": "200",
			"unit": "px",
			"min": "0",
			"default": 60
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "个人中心",
				"en_US": "Personal center"
			},
			"id": "is_member",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "搜索",
				"en_US": "Search"
			},
			"id": "is_search",
			"default": "1"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换",
				"en_US": "Currency switch"
			},
			"id": "is_currency",
			"default": "1"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "货币前展示国旗",
				"en_US": "Display the national flag in front of the currency"
			},
			"id": "is_currency_flag",
			"default": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "搜索底纹",
				"en_US": "Search shading"
			},
			"id": "search_placeholder"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"top_nav": {
				"id": "",
				"title": ""
			},
			"nav": {
				"id": "",
				"title": ""
			},
			"board_text": "We Free Shipping Worldwide.",
			"board_bg": "#f5f5f5",
			"pc_logo_pic": {
				"src": "",
				"alt": ""
			},
			"pc_logo_w": 60,
			"wap_logo_pic": {
				"src": "",
				"alt": ""
			},
			"hover_color": "#ff6f61",
			"wap_logo_w": 60,
			"is_member": true,
			"is_search": true,
			"is_currency": true,
      "is_currency_flag": false,
			"search_placeholder": "Search",
			"logo_pic": {
				"src": "",
				"alt": ""
			}
		},
		"blocks": [],
		"type": "header"
	}
}
{% endschema %}